<link rel="stylesheet" href="RESOURCE_PATH/component/view/graphic_nav/css/graphic_nav.css"/>
<div id="graphic-navigation-{$attr['random_flag']}" class="graphic-navigation">
	<div class="wrap">
		{foreach name="$attr.list" item="vo"}
		<div class="item" style="padding:{$attr.padding}px 0;background-color:{$attr.backgroundColor};">
			<a href="{if condition="$vo.link"}{:addon_url($vo['link']['h5_url'])}{else/}javascript:;{/if}">
				{if condition="$attr['selectedTemplate'] == 'imageNavigation' && $vo.imageUrl "}
					{if condition="stristr($vo.imageUrl,'static') === false"}
						<img src="{:img($vo.imageUrl)}"/>
					{else/}
						<img src="{:img(__PUBLIC__.'/'.$vo.imageUrl)}"/>
					{/if}
				{/if}
				{if condition="$vo['title']"}
					<span style="color: {$attr.textColor}">{$vo.title}</span>
				{/if}
			</a>
		</div>
		{/foreach}
	</div>
</div>
<script type="text/javascript">
	hui('#graphic-navigation-{$attr["random_flag"]}').scrollX(("{$attr.scrollSetting}" == "fixed") ? "{$attr.list|count}" : 3, '.item');
	setTimeout(function () {
		//解决渲染时加载闪动
		$("#graphic-navigation-{$attr['random_flag']}").css("visibility","visible");
	},5);
</script>